<template>
  <div class="zl-echart-config">
    <div v-for="(item,index) in graphOptions.xAxis" :key="index">
          <Checkbox v-model="graphOptions.xAxis[index].show" >显示X轴</Checkbox>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">字体大小</span>
              <div class="r-cnt">
                  <Select  class="box-class" placeholder="大小" v-model="graphOptions.xAxis[index].axisLabel.fontSize" >
                      <Option  v-for="its in 24" v-if="its>=12" :key="its" :label="its+'px'" :value="its">
                      </Option>
                  </Select>
              </div>
          </div>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">文字方向</span>
              <div class="r-cnt">
                  <Select  class="box-class" placeholder="方向" v-model="graphOptions.xAxis[index].axisLabel.rotate"
                      vertical-align="top">
                      <Option  v-for="its in rotateList"  :key="its.value" :label="its.label" :value="its.value">
                      </Option>
                  </Select>
              </div>
          </div>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">轴线类型</span>
              <div class="r-cnt">
                  <Select  class="box-class" placeholder="方向" v-model="graphOptions.xAxis[index].axisLine.lineStyle.type"
                      vertical-align="top">
                      <Option  v-for="axisTypeItem in axisType" :key="axisTypeItem.value" :label="axisTypeItem.label" :value="axisTypeItem.value">
                      </Option>
                  </Select>
              </div>
          </div>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">轴线大小</span>
              <div class="r-cnt">
                  <Input v-model="graphOptions.xAxis[index].axisLine.lineStyle.width"></Input>
              </div>
          </div>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">轴线颜色</span>
              <div class="r-cnt">
                  <ColorPicker v-model="graphOptions.xAxis[index].axisLine.lineStyle.color"></ColorPicker>
              </div>
          </div>

          <!-- 分割线 -->
          <Checkbox v-model="graphOptions.xAxis[index].splitLine.show" >显示分割线</Checkbox>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">类型</span>
              <div class="r-cnt">
                  <Select  class="box-class" placeholder="方向" v-model="graphOptions.xAxis[index].splitLine.lineStyle.type"
                      vertical-align="top">
                      <Option  v-for="axisTypeItem in axisType" :key="axisTypeItem.value" :label="axisTypeItem.label" :value="axisTypeItem.value">
                      </Option>
                  </Select>
              </div>
          </div>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">大小</span>
              <div class="r-cnt">
                  <Input v-model="graphOptions.xAxis[index].splitLine.lineStyle.width"></Input>
              </div>
          </div>
          <div class="right-row" v-if="item.show">
              <span class="r-tit">颜色</span>
              <div class="r-cnt">
                  <ColorPicker v-model="graphOptions.xAxis[index].splitLine.lineStyle.color"></ColorPicker>
              </div>
          </div>

      </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'ZlXaxis',
  data () {
    return {
      axisType: [{
        label: '实线',
        value: 'solid'
      }, {
        label: '虚线',
        value: 'dashed'
      }],
      rotateList:[
          {value:"0",label:"横向"},
          {value:"90",label:"竖向"},
          {value:"45",label:"左倾斜45"},
          {value:"-45",label:"右倾斜45"}
      ]
    }
  },
  props: {
    graphOptions:{
        type:Object,
        default:function(){
            return {};
        }
    },
    graphType:{
        type:String
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
